<template>
  <div>

    <el-form :model="filterData" label-width="95px">
      <el-row :gutter="20">
        <div style=" display: flex;">
          <el-col style="width: 300px;display: flex;">
            <div class="item_label">开票区间:</div>
            <el-date-picker type="daterange" v-model="filterData.daterange" size="mini" start-placeholder="起始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" range-separator="至"
              style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col style="width: 300px;display: flex;">
            <div class="item_label">销项票号:</div>
            <el-input v-model="filterData.fphm" style="width: 100%;" placeholder="销项数电票号码或纸质发票号码" size="mini"
              clearable></el-input>
          </el-col>

          <el-col style="width: 300px;display: flex;">
            <div class="item_label">销项名称:</div>
            <el-input v-model="filterData.title" style="width: 100%;" placeholder="货物或服务名称" size="mini"
              clearable></el-input>
          </el-col>

          <el-col style="width: 300px;display: flex;">
            <div class="item_label">购方名称:</div>
            <el-select v-model="filterData.buyer" style="width: 100%;" size="mini" placeholder="购方名称" filterable
              allow-create clearable>
              <el-option v-for="(item,index) in buyerlist" :label="item.title" :value="item.title" :key="index">
              </el-option>
            </el-select>
          </el-col>
          <el-col style="width: 300px;display: flex;line-height: 30px;">
            <div class="item_label">所属账套:</div>
            <el-select v-model="filterData.account" filterable placeholder="账套" style="width: 100%;" clearable>
              <el-option :label="item.name" :value="item.name" v-for="(item,index) in accounts"
                :key="index"></el-option>
            </el-select>
          </el-col>

          <el-col style="width: 100px;">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          </el-col>
        </div>
      </el-row>
      <div
        style="background-color: #fefefe; padding: 5px 5px 0px 5px;border-radius: 1px; border-bottom: 1px solid #EEEEEE; ">
      </div>
      <div>
        <el-button type="primary" icon="el-icon-download" @click="handleExport">导出数据</el-button>
      </div>
      <div>
        <el-table :data="tableData" border>
          <el-table-column label="序号" type="index" align="center"></el-table-column>
          <el-table-column label="销项发票" align="center">
            <el-table-column label="开票时间" prop="date" align="center" width="100px">
              <template v-slot="scope">
                  {{scope.row.date.split(' ')[0]}}
              </template>
            </el-table-column>
            <el-table-column label="销项发票号" prop="fphm" width="180px" align="center"></el-table-column>
            <el-table-column label="类型" prop="type" width="100px" align="center"></el-table-column>
            <el-table-column label="销项货物或服务名称" show-overflow-tooltip width="250px">
              <template v-slot="scope">
                *{{scope.row.taxname}}* {{scope.row.title}}
              </template>
            </el-table-column>
            <el-table-column label="规格型号" prop="model" width="150px" show-overflow-tooltip></el-table-column>
            <el-table-column label="单位" prop="unit" width="60px" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column label="数量" prop="count" width="100px" show-overflow-tooltip  align="center"></el-table-column>
            <el-table-column label="单价" prop="price" width="100px" show-overflow-tooltip  align="center"></el-table-column>
            <el-table-column label="金额" prop="total" width="100px" show-overflow-tooltip  align="center"></el-table-column>
            <el-table-column label="税点" prop="rate" width="80px" show-overflow-tooltip  align="center">
              <template v-slot="scope">
                {{scope.row.rate*100}}%
              </template>
            </el-table-column>
            <el-table-column label="税额" prop="tax" width="100px" show-overflow-tooltip  align="center"></el-table-column>
          </el-table-column>
          <el-table-column label="进项发票">
          <el-table-column label="进项票号" prop="buyticket_bindnum" width="180px" align="center"></el-table-column>
          <el-table-column label="销项货物或服务名称" show-overflow-tooltip width="250px">
            <template v-slot="scope">
              *{{scope.row.taxname}}* {{scope.row.title}}
            </template>
          </el-table-column>
          </el-table-column>

        </el-table>
      </div>

      <div>
        <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
          :current-page="curpage" prev-text="上一页" next-text="下一页" :page-sizes="[15, 30, 50]"
          @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>

    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        accounts: [],
        buyerlist: [],
        filterData: {
          daterange: '',
          account: '',
          saleticket_fphm: '',
          taxtitle: '',
          buyer: ''
        },
        curpage:1,
        pagesize:15,
        numrows: 1,
        tableData: [],
      }
    },
    created() {
      this.loadBuyerList();
      this.loadAccounts();
      this.loadDataList();
    },
    methods: {
      loadBuyerList() {
        this.axios.post("api/admin/client/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.buyerlist = res.data.list;
          }
        });
      },
      loadAccounts() {
        this.axios.post("api/admin/account/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.accounts = res.data.list;
          }
        })
      },
      handleQuery() {
        this.loadDataList();
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList() {
        const params = {
          curpage: this.curpage,
          pagesize: this.pagesize,
          daterange: this.filterData.daterange,
          saleticket_fphm: this.filterData.saleticket_fphm,
          buyer: this.filterData.buyer,
          account: this.filterData.account
        }
        this.axios.post("api/admin/s2clist/list", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
            this.numrows = res.data.numrows;
          }
        })
      },
      handleExport(){
          const params = {
            curpage: this.curpage,
            pagesize: this.pagesize,
            daterange: this.filterData.daterange,
            saleticket_fphm: this.filterData.saleticket_fphm,
            buyer: this.filterData.buyer,
            account: this.filterData.account
          }


          this.downloadFile("api/admin/s2clist/export",params).then(res=>{


                this.$message.success({message:"导出销售与成本列表成功"});


          })

      }
    }
  }
</script>
<style>
  .item_label {
    text-align: center;
    line-height: 30px;
    margin: 0px 2px;
    width: 100px;
  }
</style>
